<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>题目-[[${problem.name}]]</title>
    <div th:replace="~{fragments/head-base}"></div>
    <!--Page level styles-->
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/modal/css/component.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/css/pages/problem_detail.css}"/>

</head>

<body class="body sidebar-left-hidden fixedNav_position fixedMenu_left">
<div class="preloader" style=" position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000;
  backface-visibility: hidden;
  background: #ffffff;">
    <div class="preloader_img" style="width: 200px;
  height: 200px;
  position: absolute;
  left: 48%;
  top: 48%;
  background-position: center;
z-index: 999999">
        <img src="img/loader.gif" style=" width: 50px;" alt="loading...">
    </div>
</div>
<div id="wrap">
    <div th:replace="~{fragments/top :: top}"></div>
    <!-- /#top -->
    <div class="wrapper fixedNav_top">
        <div th:replace="~{fragments/left :: left}"></div>
        <!-- /#left -->
        <div id="content" class="bg-container">
            <header class="head">
                <div class="main-bar">
                    <div class="row no-gutters">
                        <div class="col-6 ">
                            <h4 class="nav_top_align">
                                <i class="fa fa-pencil" aria-hidden="true"></i>
                                <span class="ml-1">[[${problem.id}]]
                                [[${problem.name}]]
                                </span>
                            </h4>
                        </div>
                        <div class="col-6 ">
                            <div th:if="${compId == null}">
                                <ol class="breadcrumb float-right nav_breadcrumb_top_align">
                                    <li class="breadcrumb-item">
                                        <a th:href="@{/}">
                                            <i class="fa fa-home" aria-hidden="true"></i> 首页
                                        </a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <a th:href="@{/problem/problemListPage}">题库</a>
                                    </li>
                                    <li class="breadcrumb-item active">[[${problem.id}]]</li>
                                </ol>
                            </div>
                            <div th:if="${compId != null}">
                                <ol class="breadcrumb float-right nav_breadcrumb_top_align">
                                    <li class="breadcrumb-item">
                                        <a th:href="@{'/competition/competitionProblemListPage?compId='+${compId}}" class="btn-sm btn-primary">
                                            <i class="fa fa-angle-double-left"></i><span class="ml-1">返回比赛</span>
                                        </a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <div class="outer">
                <div class="inner bg-container">
                    <div class="row">
                        <div class="col-8">
                            <div class="card card-block">
                                <div class="text-center mt-2 mb-3">
                                    <span class=" btn-success loading btn-sm ">
                                        时间限制:[[${problem.time}]]MS
                                    </span>
                                    <span class=" loading btn-warning btn-sm ml-1">
                                        内存限制:[[${problem.memory}]]KB
                                    </span>
                                    <span class=" btn-danger loading btn-sm ml-1">
                                        难度:
                                        <span th:if="${problem.level == 1}">简单</span>
                                        <span th:if="${problem.level == 2}">中等</span>
                                        <span th:if="${problem.level == 3}">困难</span>
                                        <span th:if="${problem.level == 4}">专家</span>
                                    </span>
                                </div>
                                <div class="mt-5">
                                    <h3 class=" card-title "><strong>描述</strong></h3>
                                    <div class="card-text markdown-body" style="white-space:pre-line"
                                         th:utext="${problem.htmlContent}">
                                    </div>
                                </div>
                                <div class="mt-5">
                                    <h3 class=" card-title "><strong>输入规范</strong></h3>
                                    <div class="card-text markdown-body">
                                        [[${problem.inputDesc}]]
                                    </div>
                                </div>
                                <div class="mt-5">
                                    <h3 class="card-title"><strong>输出规范</strong>
                                    </h3>
                                    <div class="card-text markdown-body">
                                        [[${problem.outputDesc}]]
                                    </div>
                                </div>
                                <h3 class="card-title mt-5"><strong>样例输入</strong></h3>
                                <code style="white-space:pre-line"><a href="javascript:void(0)" data-clipboard-target="#inputDesc" class="float-right clipboard" onclick="copyToClipboard()" id="clipboard">复制</a><div id="inputDesc">[[${problem.testcaseInput}]]</div>
                                </code>
                                <!--style="white-space:pre-line"-->
                                <h3 class="card-title mt-5"><strong>样例输出</strong></h3>
                                <code style="white-space:pre-line">[[${problem.testcaseOutput}]]</code>

                                <div class="mt-5">
                                    <div class="float-left">
                                        <i class="fa fa-tags mr-1"></i>标签：
                                        <span class="mr-2"
                                              th:each="tag : ${#strings.arraySplit(problem.tags,',')}">
                                                <a target="_blank" th:href="@{'/problem/problemListPage?keyword='+${tag}}" class="btn btn-secondary badge-pill btn-sm">[[${tag}]]</a>
                                            </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-12">
                                    <div class="dropdown  float-left">
                                        <button style="width: 150px"
                                                class="btn btn-secondary dropdown-toggle"
                                                type="button"
                                                id="dropdownMenuButton"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fa fa-info-circle mr-1"></i>选择编程语言
                                        </button>
                                        <span id="type" value="-1" hidden="hidden">sadasdasdasdasdas</span>
                                        <div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item " id="C" onclick="setCodeType('C')"
                                               href="javascript:void(0)">C</a>
                                            <a class="dropdown-item" id="C++" onclick="setCodeType('C++')"
                                               href="javascript:void(0)">C++</a>
                                            <a class="dropdown-item" id="Java8" onclick="setCodeType('Java8')"
                                               href="javascript:void(0)">Java8</a>
                                            <a class="dropdown-item" id="Python2" onclick="setCodeType('Python2')"
                                               href="javascript:void(0)">Python2</a>
                                            <a class="dropdown-item" id="Python3" onclick="setCodeType('Python3')"
                                               href="javascript:void(0)">Python3</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-2 ">
                                    <div id="editor" class="custom_card w-100 col-12"></div>
                                    <div class="col-12 mt-2">
                                        <button onclick="submitCode()"
                                                class="notify ml-2 float-right btn btn-info  button-rounded">
                                            <i class="fa fa-cloud mr-1"></i>提交代码
                                        </button>
                                        <button class="ml-2 float-right btn  btn-secondary button-rounded "
                                                onclick="clearTestcase()"
                                                data-toggle="modal" data-href="#stack1" href="#stack1">
                                            <i class="fa fa-play mr-1"></i>运行测试
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-4">
                            <div class="card ">
                                <div class="card-header bg-white"><i class="fa fa-pie-chart mr-1"></i>题目统计</div>
                                <div class="card-block">
                                    <canvas id="myChart" class="w-100" style="height: 400px"></canvas>
                                </div>
                            </div>

                            <div class="card mt-3" id="changeListApp">
                                <div class="card-header bg-white">
                                    <i class="fa fa-flag mr-1"></i>推荐题目
                                </div>
                                <div class="card-body">
                                    <div v-for="problem in suggestProblemList">
                                        <div class="task-item">
                                            <a class="primary-hover"
                                               :href="'problem/problemDetailPage?problemId='+problem.id">{{problem.name}}</a>
                                            <span class="float-right">
                                                   {{problem.tags}}
                                            </span>
                                            <!--<span class="float-right text-muted progress-danger">难度{{problem.level}}</span>-->
                                        </div>
                                    </div>
                                    <div class="task-item">
                                        <button @click="changeList()"
                                                class=" w-100 btn btn-outline-primary glow_button glow_button"><i
                                                class="fa fa-random mr-1"></i>更换一组
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!-- /.inner -->
    <!-- /.outer -->

    <!-- /#content -->
    <!-- Modal -->
    <div class="modal fade" id="search_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <form th:action="@{/problem/problemListPage}" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="float-right" aria-hidden="true">&times;</span>
                    </button>
                    <div class="input-group search_bar_small">
                        <input type="text" class="form-control" placeholder="题目搜索" name="keyword">
                        <span class="input-group-btn">
                          <button class="btn btn-secondary" type="submit"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!--- stack1 model 运行测试-->
    <div class="modal fade bs-example-modal-sm in display_none" id="stack1" tabindex="-1" role="dialog"
         aria-hidden="false">
        <div class="modal-dialog modal-lg" style="width: 600px">
            <div class="modal-content">
                <div class="modal-header ">
                    <h4 class="modal-title ">添加一组测试用例</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <div>
                        输入字符串:
                        <textarea id="testInput" style="height: 100px" type="text" name="testInput"
                                  class="form-control"></textarea>
                    </div>
                    <div>
                        期望结果:
                        <textarea id="eOutput" style="height: 100px" type="text" name="eOutput"
                                  class="form-control"></textarea>
                    </div>
                    <div class="mt-2">
                        <a class="btn btn-secondary" data-toggle="modal" onclick="setTestcase()"
                           href="javascript:void(0)">输入题目样例</a>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>-->
                    <button type="button" id="submitRun" class="btn btn-info" onclick="testRun()">运行</button>
                </div>
            </div>
        </div>
    </div>


    <!--wrapper-->
    <!-- /#content -->
    <!-- # right side -->
</div>
<!-- /#wrap -->
<!-- global scripts-->
<script th:replace="~{fragments/footer :: footer}"></script>
<!--end of global scripts-->
<!--  plugin scripts -->
<script type="text/javascript" th:src="@{/plugins/ace/src-noconflict/ace.js}"></script>
<script th:src="@{/plugins/ace/src-noconflict/ext-language_tools.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/pluginjs/Chart.min.js}"></script>
<!--end of plugin scripts-->
<!--page scripts-->
<script th:src="@{/js/pages/problem_detail.js}"></script>
<!--end of page scripts-->
</body>


<script th:inline="javascript">
    /*<![CDATA[*/
    //初始化黏贴版
    var clipboard = new ClipboardJS('#clipboard');

    var submitCount = [[${problem.submitCount}]];
    var acCount = [[${problem.acCount}]];
    var tleCount = [[${problem.tleCount}]];
    var peCount = [[${problem.peCount}]];
    var meCount = [[${problem.meCount}]];
    var reCount = [[${problem.reCount}]];
    var ceCount = [[${problem.ceCount}]];
    var waCount = [[${problem.waCount}]];

    var problemId = [[${problem.id}]];
    var problemName = [[${problem.name}]];
    var compId = [[${compId}]];

    // vue
    var changeListApp = new Vue({
        el: '#changeListApp',
        data: {
            suggestProblemList: []
        },
        methods: {
            changeList: function () {
                this.$http.get('/problem/suggestProblemList?problemId=' + [[${problem.id}]]).then(function (res) {
                    this.suggestProblemList = res.data.data;
                }), function (res) {
                    console.log(res.data.msg);
                }
            }
        }
    });
    changeListApp.changeList();
    // end of vue


    //chars
    var ctx = document.getElementById('myChart').getContext('2d');
    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [acCount, ceCount, peCount, reCount, tleCount, meCount, waCount],
                backgroundColor: [
                    '#4BC0C0',
                    '#FFCD56',
                    '#ed92ff',
                    '#FF9F40',
                    '#62b8ff',
                    '#6574ff',
                    '#FF6384'
                ],
                borderColor: []
            }],
            labels: [
                'Accepted',
                'Compile Error',
                'Presentation Error',
                'Runtime Error',
                'Time Limit Exceeded',
                'Memory Limit Exceeded',
                'Wrong Answer'
            ]
        },
        options: {
            title: {
                display: true,
                text: '提交次数-' + submitCount + '次'
            }
        }
    });
    // en of chars

    //输入测试样例
    function setTestcase() {
        $("#testInput").val([[${problem.testcaseInput}]]);
        $("#eOutput").val([[${problem.testcaseOutput}]]);
    }

    function clearTestcase() {
        $("#testInput").val("");
        $("#eOutput").val("");
    }


    function submitCode() {
        submit(problemName,compId);

    }


    /*]]>*/
</script>
</html>
